<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/bootstrap.js"></script>
		<style type="text/css">
			.row {
				margin: 10px 0px;
			}

			.table {
				margin-bottom: 0px;
			}

			.pagination {
				margin-left: 15px;
			}
		</style>
		<script type="text/javascript">
			//当前页
			let currentPage = 1;
			//每页显示条数
			let pageSize = 10;
			//总页数
			let totalPage = 0;
			//总条数
			let totalNum = 0;
			let list = null;

			function getSkuList(currentPage, pageSize, skuList, searchName) {
				//开始下标
				let startIndex = (currentPage - 1) * pageSize;
				//结束下标
				let endIndex = currentPage * pageSize;
				if (skuList == null) {
					//json格式字符串
					skuList = localStorage.getItem("sku");
					//数组对象
					skuList = JSON.parse(skuList);
				}
				//总页数
				totalPage = Math.ceil(skuList.length / pageSize);
				//总条数
				totalNum = skuList.length;
				//分页数据
				skuList = skuList.slice(startIndex, endIndex);
				let table = `<table class="table table-bordered">`;
				let th = `<tr>
				        <th>ID</th>
						<th>名称</th>
						<th>价格</th>
						<th>操作</th>
					</tr>`;
				let trs = ``;
				skuList.forEach(function(val) {
					let tr = `<tr>
					        <td id="skuId">${val.id}</td>
							<td>${val.name}</td>
							<td>${val.price}</td>
							<td><button type="button" class="btn btn-info btn-xs edit">修改</button>
							<button type="button" class="btn btn-danger btn-xs delete">删除</button></td>
						</tr>`;
					trs += tr;
				});
				$('.sku').empty();
				$('.sku').append(table + th + trs + `</table>`);

				$('.currentPage').html(currentPage);
				$('.totalPage').html(totalPage);
				$('.totalNum').html(totalNum);
			}

			$(document).ready(function() {
				getSkuList(currentPage, pageSize);
				//上一页
				$('#prev').click(function() {
					if (currentPage > 1) {
						currentPage--;
						getSkuList(currentPage, pageSize, list);
					}
				})
				//下一页
				$('#next').click(function() {
					if (currentPage <= totalPage) {
						currentPage++;
						getSkuList(currentPage, pageSize, list);
					}
				})
				//保存商品
				$('.save').click(function() {
					const sku = {
						id: Math.ceil(Math.random() * 10000),
						name: $('#skuName').val(),
						price: $('#skuPrice').val(),
					}

					//取
					let skuList = localStorage.getItem("sku");
					skuList = JSON.parse(skuList);
					skuList.push(sku);
					//存
					localStorage.setItem("sku", JSON.stringify(skuList));
					//关闭模态框
					$('#exampleModal').modal('hide')
					//加载最新数据
					getSkuList(1, 2);
				})
				//修改模态框
				$(this).on('click', '.edit', function() {
					let skuId = $(this).parent().siblings("#skuId").html();
					//json格式字符串
					let skuList = localStorage.getItem("sku");
					//数组对象
					skuList = JSON.parse(skuList);
					let sku = skuList.find(function(val) {
						return val.id == skuId;
					})

					$('#skuIdEdit').val(sku.id);
					$('#skuNameEdit').val(sku.name);
					$('#skuPriceEdit').val(sku.price);
					$('#editModal').modal('show');
				});
				//修改保存
				$('.editok').click(function() {
					let skuId = $('#skuIdEdit').val();
					//json格式字符串
					let skuList = localStorage.getItem("sku");
					// //数组对象
					skuList = JSON.parse(skuList);
					//遍历数组
					skuList.forEach(function(val) {
						if (val.id == skuId) {
							val.name = $('#skuNameEdit').val();
							val.price = $('#skuPriceEdit').val();
						}
					})
					//存
					localStorage.setItem("sku", JSON.stringify(skuList));
					//关闭模态框
					$('#editModal').modal('hide')
					//加载最新数据
					getSkuList(currentPage, pageSize);
				})
				//删除模态框
				$(this).on('click', '.delete', function() {
					//商品ID
					let skuId = $(this).parent().siblings("#skuId").html();
					$('#delSkuId').val(skuId);
					$('#deleteModal').modal('show');
				});
				//删除确认
				$('.deleteok').click(function() {
					//json格式字符串
					let skuList = localStorage.getItem("sku");
					//数组对象
					skuList = JSON.parse(skuList);
					let skuId = $('#delSkuId').val();
					skuList = skuList.filter(function(val) {
						return val.id != skuId;
					});
					//存
					localStorage.setItem("sku", JSON.stringify(skuList));
					//重写加载页面
					getSkuList(currentPage, pageSize);
					$('#deleteModal').modal('hide');
				})

				$('.glyphicon-search').click(function() {
					let searchName = $('#search').val();
					if (searchName == null || searchName == "") {
						getSkuList(1, pageSize);
					} else {
						//1从localStorage中获取json格式字符串
						let skuList = localStorage.getItem("sku");
						//2转数组对象
						skuList = JSON.parse(skuList);
						//3调用数组方法查找符合条件的数据
						list = skuList.filter(function(val) {
							return val.name.includes(searchName);
						});
						getSkuList(currentPage, pageSize, list);
					}
				})
			})
		</script>
	</head>
	<body>
		<div class="row">
			<div class="col-md-12">
				<form class="form-inline">
					<div class="form-group">
						<input type="text" class="form-control" id="search" placeholder="输入搜索商品名称">
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary glyphicon glyphicon-search"></button>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
							data-whatever="@mdo">添加商品</button>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 sku">

			</div>
			<ul class="pagination">
				<li>
					<a href="#" aria-label="Previous" id="prev">
						<span aria-hidden="true">上一页</span>
					</a>
				</li>
				<li>
					<a href="#" aria-label="Next" id="next">
						<span aria-hidden="true">下一页</span>
					</a>
				</li>
				<li class="disabled">
					<span>第<span class="currentPage"></span>/<span class="totalPage"></span>页</span>
				</li>
				<li class="disabled">
					<span>共<span class="totalNum"></span>条</span>
				</li>
			</ul>
		</div>
		<!-- 添加商品模态框 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">添加商品</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<input type="text" class="form-control" id="skuName" placeholder="商品名称">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="skuPrice" placeholder="商品价格">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary save">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改商品模态框 -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">修改商品</h4>
					</div>
					<div class="modal-body">
						<form>
							<input type="text" id="skuIdEdit" hidden>
							<div class="form-group">
								<input type="text" class="form-control" id="skuNameEdit" placeholder="商品名称">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="skuPriceEdit" placeholder="商品价格">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary editok">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 删除商品模态框 -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">删除商品</h4>
					</div>
					<div class="modal-body">
						<input type="hidden" id="delSkuId" />
						<p class="text-danger">确认要删除吗?</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary deleteok">确定</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
